<template>
    <div class="AdminAuthorityBox">
        <span class="pageName">权限管理 > 管理员管理</span>

        <!-- 搜索框 -->
        <div class="searchBox">
            <div class="searchInp">
                <label for="adminID" style="margin-left:0px">
                    管理员ID：
                </label>
                <el-input v-model="adminID" placeholder="请输入管理员ID" name="adminID" class="inp"></el-input>
                <label for="userName">
                    用户名：
                </label>
                <el-input v-model="userName" placeholder="请输入用户名" name="userName" class="inp"></el-input>
                <label for="tel">
                    手机号：
                </label>
                <el-input v-model="tel" placeholder="请输入手机号" name="tel" class="inp"></el-input>
                <label for="principal">
                    负责人：
                </label>
                <el-input v-model="principal" placeholder="请输入负责人" name="principal" class="inp"></el-input>
                <label for="role">
                    角色：
                </label>
                <el-select v-model="roleValue" slot="prepend" placeholder="全部" name="role" class="option">
                    <!-- 循环渲染option的每一项 -->
                    <el-option v-for="optionArr in roleArr" :key="optionArr.id" :label="optionArr.content"
                        :value="optionArr.content"></el-option>
                </el-select>
                <label for="mode">
                    状态：
                </label>
                <el-select v-model="modeValue" slot="prepend" placeholder="全部" name="mode" class="option">
                    <!-- 循环渲染option的每一项 -->
                    <el-option v-for="optionArr in modeArr" :key="optionArr.id" :label="optionArr.content"
                        :value="optionArr.content"></el-option>
                </el-select>
                <!-- 时间 -->
                <div class="dateBox">
                    <label for="loginDate" class="noGapLabel">
                        最近登录时间：
                    </label>
                    <el-date-picker v-model="loginDate" type="daterange" align="right" unlink-panels range-separator="~"
                        start-placeholder="2015-10-02" :end-placeholder="endDate" :picker-options="pickerOptions"
                        value-format="yyyy-MM-dd" class="dateInp">
                    </el-date-picker>
                    <label for="addDate">
                        添加时间：
                    </label>
                    <el-date-picker v-model="addDate" type="daterange" align="right" unlink-panels range-separator="~"
                        start-placeholder="2015-10-02" :end-placeholder="endDate" :picker-options="pickerOptions"
                        value-format="yyyy-MM-dd" class="dateInp">
                    </el-date-picker>
                </div>

                <el-button type="primary" @click="searchAdmin">搜索</el-button>
                <div class="tableBtn">
                    <el-button type="primary" @click="addAdminForm = true">新增</el-button>
                    <el-button type="info" @click="delAdmin" :plain="true">删除</el-button>
                </div>
            </div>

        </div>
        <div class="tableBox">
            <!-- 表格 -->
            <el-table ref="multipleTable"
                :data="adminAuthorityList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                tooltip-effect="dark" @selection-change="handleSelectionChange" border
                style="width: 98%;font-size: 14px;margin: auto;margin-left: 30px;" :header-cell-style="{
                    background: '#015478', color: '#fff'
                }">
                <el-table-column type="selection" align="center" width="50px"></el-table-column>
                <el-table-column prop="adminId" label="管理员ID" align="center">
                </el-table-column>
                <el-table-column prop="role" label="角色" align="center">
                </el-table-column>
                <el-table-column prop="img" label="头像" align="center">
                    <template slot-scope="scope">
                        <img slot="reference" :src="scope.row.img" style="width: 30px;height: 30px">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="用户名" align="center">
                </el-table-column>
                <el-table-column prop="tel" label="手机号" align="center" width="107px">
                </el-table-column>
                <el-table-column prop="principal" label="负责人" align="center">
                </el-table-column>
                <el-table-column prop="loginDate" label="最近登录时间" align="center" width="140px">
                </el-table-column>
                <el-table-column prop="addDate" label="添加时间" align="center" width="140px">
                </el-table-column>
                <el-table-column prop="superior" label="上级用户" align="center">
                </el-table-column>
                <el-table-column prop="mode" label="状态" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center" width="180px">
                    <template slot-scope="scope">
                        <el-button @click="freeze(scope.row)" type="text" style="color: #015478;font-size: 14px">{{
                            scope.row.operate
                        }}</el-button>
                        <el-button @click="update(scope.row)" type="text"
                            style="color: #015478;font-size: 14px">修改</el-button>
                        <el-button @click="del(scope.row)" type="text"
                            style="color: #015478;font-size: 14px">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <pagination :tableData="adminAuthorityList" @sizeChange="sizeChange" @currentChange="currentChange">
            </pagination>
        </div>


        <!-- 新增信息弹出框 -->
        <el-dialog title="新增信息" :visible.sync="addAdminForm" width="35%">
            <el-form :model="formData" :rules="rules" ref="formData" class="addForm">
                <el-form-item label="头像" :label-width="formLabelWidth" prop="img">
                    <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false"
                        :multiple="false" :on-change="uploadFile" accept="image/jpg,image/jpeg,image/png">
                        <img v-if="formData.img" :src="formData.img" class="el-upload-picture-car"
                            style="width:80px;height: 80px;" />
                        <el-button type="primary" v-show="imgshow">上传头像</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="角色" :label-width="formLabelWidth" prop="role">
                    <el-select v-model="formData.role" placeholder="请选择角色">
                        <el-option label="超级管理员" value="超级管理员"></el-option>
                        <el-option label="管理员" value="管理员"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="formData.name" autocomplete="off" class="addInp" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth" prop="tel">
                    <el-input v-model="formData.tel" autocomplete="off" class="addInp" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="负责人" :label-width="formLabelWidth" prop="principal">
                    <el-input v-model="formData.principal" autocomplete="off" class="addInp"
                        placeholder="请输入负责人"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth" prop="mode">
                    <el-radio v-model="formData.mode" :label="2">正常</el-radio>
                    <el-radio v-model="formData.mode" :label="3">已冻结</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addAdmin('formData')" :plain="true">确 定</el-button>
                <el-button @click="calcelAdd('formData')">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 修改信息弹出框 -->
        <el-dialog title="修改信息" :visible.sync="updateAdminForm" width="35%">
            <el-form :model="updateData" :rules="rules" ref="updateData" class="addForm">
                <el-form-item label="头像" :label-width="formLabelWidth" prop="img">
                    <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false"
                        :multiple="false" :on-change="updateFile" accept="image/jpg,image/jpeg,image/png">
                        <img v-if="updateData.img" :src="updateData.img" class="el-upload-picture-car"
                            style="width:80px;height: 80px;" />
                    </el-upload>
                </el-form-item>
                <el-form-item label="角色" :label-width="formLabelWidth" prop="role">
                    <el-select v-model="updateData.role" placeholder="请选择角色">
                        <el-option label="超级管理员" value="超级管理员"></el-option>
                        <el-option label="管理员" value="管理员"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="updateData.name" autocomplete="off" class="addInp"
                        placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth" prop="tel">
                    <el-input v-model="updateData.tel" autocomplete="off" class="addInp"
                        placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="负责人" :label-width="formLabelWidth" prop="principal">
                    <el-input v-model="updateData.principal" autocomplete="off" class="addInp"
                        placeholder="请输入负责人"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth" prop="mode">
                    <el-radio v-model="updateData.mode" :label="2">正常</el-radio>
                    <el-radio v-model="updateData.mode" :label="3">已冻结</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateAdmin('updateData')" :plain="true">确 定</el-button>
                <el-button @click="calcelupdate('updateData')">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

import pagination from '@/components/pagination/pagination.vue';
export default {
    name: 'AdminAuthority',
    components: {
        pagination
    },
    data() {
        return {
            adminAuthorityList: [],
            currentPage: 1, // 当前页码
            total: '', // 总条数
            pageSize: 8, // 每页的数据条数

            // 输入框内容
            adminID: '',
            userName: '',
            tel: '',
            principal: '',
            roleValue: '',
            modeValue: '',
            loginDate: '',
            addDate: '',
            // 选中
            multipleSelection: [],
            // 批量删除
            delAdminData: [],

            roleArr: [
                { id: 0, content: '全部' },
                { id: 1, content: '超级管理员' },
                { id: 2, content: '管理员' },
            ],
            modeArr: [
                { id: 0, content: '全部' },
                { id: 1, content: '正常' },
                { id: 2, content: '已冻结' },
            ],
            // 设置默认显示时间
            endDate: '',
            // 时间输入框快捷选项
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }],
                // 设置可选时间范围
                disabledDate: (time) => {
                    return time.getTime() <= new Date('2015-10-01').getTime() || time.getTime() > Date.now() - 8.64e6
                }
            },

            // 新增
            formData: {
                role: '',
                img: '',
                name: '',
                tel: '',
                principal: '',
                loginDate: '',
                addDate: '',
                superior: '',
                mode: '',
                operate: ''
            },
            // 修改
            updateData: {
                role: '',
                img: '',
                name: '',
                tel: '',
                principal: '',
                loginDate: '',
                addDate: '',
                superior: '',
                mode: '',
                operate: ''
            },
            // 规则
            rules: {
                img: [
                    { required: true, message: '请选择头像', trigger: ['blur', 'change', 'click'] },
                ],
                role: [
                    { required: true, message: '请选择角色', trigger: ['blur', 'change'] }
                ],
                name: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: ['blur', 'change'] }
                ],
                tel: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '输入错误', trigger: ['blur', 'change'] }
                ],
                principal: [
                    { required: true, message: '请输入负责人', trigger: 'blur' },
                    { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: ['blur', 'change'] }
                ],
                mode: [
                    { required: true, message: '请选择状态', trigger: 'change' }
                ],

            },
            addAdminForm: false,
            updateAdminForm: false,
            formLabelWidth: '80px',
            // 头像
            imgshow: true,
        }
    },
    methods: {
        sizeChange(current, count) {
            this.currentPage = current;
            this.pageSize = count;
        },
        currentChange(current) {
            this.currentPage = current
        },
        // 获取当前日期
        handleTimeNew() {
            let now = new Date();
            let year = now.getFullYear();
            let month = (now.getMonth() + 1).toString().padStart(2, 0);
            let day = now.getDate().toString().padStart(2, 0);
            return year + '-' + month + '-' + day
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        // 搜索
        searchAdmin() {
            this.$axios({
                method: 'get',
                url: this.$api.authority.adminSearch,
                params: {
                    adminId: this.adminID,
                    name: this.userName,
                    tel: this.tel,
                    principal: this.principal,
                    role: this.roleValue,
                    mode: this.modeValue,
                    loginDate: this.loginDate,
                    addDate: this.addDate,
                }
            })
                .then(res => {
                    this.adminAuthorityList = res.data
                    this.adminID = '',
                        this.userName = '',
                        this.tel = '',
                        this.principal = ''
                })
                .catch(err => {
                    console.log(err);
                })

        },
        // 添加
        uploadFile(item) {
            this.formData.img = URL.createObjectURL(item.raw);
            if (this.formData.img != '') {
                this.imgshow = false
            };
        },
        addAdmin(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.addAdminForm = false;
                    this.$axios({
                        method: 'post',
                        url: this.$api.authority.addAdmin,
                        data: {
                            addAdminData: this.formData
                        }
                    })
                        .then(res => {
                            if (res.data == 'success') {
                                this.$axios.get(this.$api.authority.adminList)
                                    .then(res => {
                                        this.adminAuthorityList = res.data;
                                    })
                                    .catch(err => {
                                        console.log(err);
                                    })
                                for (let key in this.formData) {
                                    this.formData[key] = ''
                                }
                                this.$refs[formName].resetFields();
                                this.imgshow = true
                            }
                        })
                        .catch(err => {
                            console.log(err);
                        })
                } else {
                    return false
                }
            })
        },
        calcelAdd(formName) {
            addAdminForm = false
            for (let key in this.formData) {
                this.formData[key] = ''
            }
            this.imgshow = true
            this.$refs[formName].resetFields();
        },
        // 批量删除
        delAdmin() {
            if (this.multipleSelection != '') {
                this.multipleSelection.forEach(item => {
                    this.delAdminData.push(item.adminId)
                })
                this.$confirm('是否继续?', '批量删除管理员信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.$axios({
                        method: 'get',
                        url: this.$api.authority.delSelectionAdmin,
                        params: {
                            delSelectionData: this.delAdminData
                        }
                    })
                        .then(res => {
                            if (res.data == 'success') {
                                this.$axios.get(this.$api.authority.adminList)
                                    .then(res => {
                                        this.adminAuthorityList = res.data;
                                    })
                                    .catch(err => {
                                        console.log(err);
                                    })
                                this.multipleSelection = []
                                this.delGroupId = []
                            } else {
                                console.log('未选中');
                            }

                        })
                        .catch(err => {
                            console.log(err);
                        })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            } else {
                this.$message({
                    showClose: true,
                    message: '请选择需要删除的信息！',
                    type: 'warning'
                })
            }
        },

        // 冻结
        freeze(row) {
            this.$axios({
                method: 'get',
                url: this.$api.authority.alterAdminMode,
                params: {
                    adminId: row.adminId,
                    mode: row.mode,
                    operate: row.operate
                }
            })
                .then(res => {
                    if (res.data == 'success') {
                        this.$axios.get(this.$api.authority.adminList)
                            .then(res => {
                                this.adminAuthorityList = res.data;
                            })
                            .catch(err => {
                                console.log(err);
                            })
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        },
        // 修改
        updateFile(item) {
            this.updateData.img = URL.createObjectURL(item.raw);
            if (this.updateData.img != '') {
                this.imgshow = false
            };
        },
        update(row) {
            this.updateAdminForm = true;
            this.updateData = { ...row }
            if (row.mode == '正常') {
                this.updateData.mode = 2
            } else {
                this.updateData.mode = 3
            }
        },
        updateAdmin(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.updateAdminForm = false;
                    this.$axios({
                        method: 'post',
                        url: this.$api.authority.alterAdminData,
                        data: {
                            updateAdminData: this.updateData
                        }
                    })
                        .then(res => {
                            if (res.data == 'success') {
                                this.$axios.get(this.$api.authority.adminList)
                                    .then(res => {
                                        this.adminAuthorityList = res.data;
                                    })
                                    .catch(err => {
                                        console.log(err);
                                    })
                                    this.$refs[formName].resetFields();
                            }
                        })
                        .catch(err => {
                            console.log(err);
                        })
                } else {
                    return false
                }
            })
        },
        calcelupdate(formName) {
            this.updateAdminForm = false
            for (let key in this.updateData) {
                this.updateData[key] = ''
            }
            this.imgshow = true
            this.$refs[formName].resetFields();
        },
        // 删除
        del(row) {
            this.$confirm('是否继续?', '删除该管理员', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.$axios({
                    method: 'get',
                    url: this.$api.authority.delAdmin,
                    params: {
                        adminId: row.adminId
                    }
                })
                    .then(res => {
                        if (res.data == 'success') {
                            this.$axios.get(this.$api.authority.adminList)
                                .then(res => {
                                    this.adminAuthorityList = res.data;
                                })
                                .catch(err => {
                                    console.log(err);
                                })
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },

    },
    created() {
        this.roleValue = this.roleArr[0].content,
            this.modeValue = this.modeArr[0].content,
            this.endDate = this.handleTimeNew()
        this.$axios.get(this.$api.authority.adminList)
            .then(res => {
                this.adminAuthorityList = res.data;
            })
            .catch(err => {
                console.log(err);
            })
    },
}
</script>

<style scoped>
.AdminAuthorityBox {
    display: flex;
    flex-direction: column;
}

.inpBox {
    display: flex;
    padding: 10px 10px;
}

.searchInp {
    height: 100px;
    display: flex;
    align-items: center;
    align-content: space-around;
    margin-left: 20px;
    flex-wrap: wrap;
}

.inp {
    width: 145px;
}

.option {
    width: 90px;
}

.dateInp {
    width: 225px;
}

button {
    height: 40px;
    margin-left: 10px;
}

.tableBtn {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}

.el-form-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 20px;
}

.addInp {
    width: 260px;
}

.addForm>>>.el-form-item {
    margin-left: 0px;
}

.addForm>>>.el-form-item__content {
    margin-left: 10px !important;
}

.styleA .el-upload--picture-card {
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.styleB .el-upload--picture-card {
    display: none;
}
</style>